.editableHeading {
  display: flex;
  align-items: center;

  min-width: 0;

  &.fullSize {
    width: 100%;
  }

  &.isEditing {
    gap: var(--ring-unit);
  }
}

.headingWrapperButton {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;

  cursor: pointer;
  user-select: text;

  text-align: inherit;

  color: inherit;

  border: 0;
  border-radius: var(--ring-border-radius);
  outline: none;
  background: inherit;

  font-size: inherit;

  .disabled &,
  .selectionMode & {
    user-select: text;

    border-radius: 0;
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px var(--ring-border-hover-color);
  }

  .disabled &:focus,
  .selectionMode &:focus {
    box-shadow: none;
  }

  &:hover {
    background-color: var(--ring-hover-background-color);
  }

  .disabled &:hover,
  .selectionMode &:hover {
    cursor: initial;

    background-color: initial;
  }
}

.heading {
  display: -webkit-box;
  overflow: hidden;

  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

  word-break: break-all;

  border-radius: var(--ring-border-radius);

  .multiline & {
    -webkit-line-clamp: 3;

    word-break: break-word;
  }
}

.heading.heading,
.heading.heading:first-child {
  margin: 6px 0;

  line-height: 28px;
}

.input {
  margin-bottom: 2px;
  padding: 0;
  padding-top: 6px;
  padding-bottom: 3px;

  color: var(--ring-heading-color);
  caret-color: var(--ring-main-color);

  border: 0;
  border-bottom: 1px solid var(--ring-borders-color);
  outline: none;
  background-color: transparent;

  font-family: var(--ring-font-family);
  font-weight: var(--ring-font-weight-bold);
  line-height: 28px;

  &::placeholder {
    color: var(--ring-disabled-color);
  }

  &:focus {
    margin-bottom: 1px;

    border-bottom-width: 2px;
    border-bottom-color: var(--ring-main-color);
  }

  &[disabled] {
    background-color: initial;
  }

  .error & {
    margin-bottom: 1px;

    border-bottom-width: 2px;
    border-bottom-color: var(--ring-error-color);
  }
}

.textarea {
  resize: none;
}

.textareaNotOverflow {
  overflow: hidden;
}

.textareaFade {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 30px;

  content: '';
  pointer-events: none;

  background: linear-gradient(to bottom,
  rgba(var(--ring-content-background-components), 0),
  rgba(var(--ring-content-background-components), 1));
}

.textareaWrapper {
  position: relative;

  display: flex;
}

.button {
  margin: 6px 0;
}

.errorText {
  margin: calc(var(--ring-unit) / 2) 0;

  color: var(--ring-error-color);

  font-size: var(--ring-font-size-smaller);
  line-height: var(--ring-line-height-lowest);
}

.level1 {
  font-size: 24px;
}

.level2 {
  font-size: 20px;
}

.level3 {
  font-size: 16px;
}

.sizeS {
  max-width: calc(var(--ring-unit) * 12);
}

.sizeM {
  max-width: calc(var(--ring-unit) * 30);
}

.sizeL {
  max-width: calc(var(--ring-unit) * 50);
}

.sizeFULL {
  max-width: 100%;
}
